<template>
  <div class="event">
    <CommonForm :onChange="handleChange" :formData="selectedComponent.props" :formJson="formJson" />

    <EditTabs ref="editTabsRef" />

  </div>
</template>

<script >
import { mapState } from "vuex"
import CommonForm from "@/components/CommonForm"
import EventBus from '../../../EventBus'
import getAttrList from "./attr"
import EditTabs from "./EditTabs"
export default {
  data () {
    return {
      customFormJson: []
    }
  },
  computed: {
    ...mapState('lowCode', {
      selectedComponent: state => state.selectedComponent,
    }),
    formJson () {
      return getAttrList(this.selectedComponent.tag, this.$store.state.lowCode, this)
    }
  },
  mounted () {
    EventBus.$once("editTagsList", () => {
      this.$refs["editTabsRef"].show()
    })
  },
  methods: {
    handleChange (fieldName, value) {
      console.log(fieldName, value)
      // const selectedComponent = {
      //   ...this.selectedComponent,

      // }
      this.selectedComponent.props = {
          ...this.selectedComponent.props,
          [fieldName]: value
        }
      this.$store.commit("lowCode/setSelectedComponent", this.selectedComponent)
      EventBus.$emit("setSelectComponentUpdateList", {})
    }
  },
  components: {
    CommonForm,
    EditTabs
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
